@<template>
  <div>
       <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- card卡片区域 -->
    <el-card>
        <!-- 权限表格 -->
        <el-table class="rights-table" :data="rightsList" border stripe> 
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="authName" label="权限名称"></el-table-column>
            <el-table-column prop="path" label="路径"></el-table-column>
            <el-table-column  label="权限登记">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.level==0">{{scope.row.level| changeLevel}}</el-tag>
                    <el-tag v-else-if="scope.row.level==1" type="success" >{{scope.row.level| changeLevel}}</el-tag>
                    <el-tag v-else type="info" >{{scope.row.level| changeLevel}}</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
    data() {
        return {
            // 权限列表
            rightsList: [],
            //请求显示类型
            type: 'list',
        }
    },
    created() {
        this.getRightsList()
    },
    methods: {
        //请求权限列表
        async getRightsList() {
            const {data: res} = await this.$http.get(`rights/${this.type}`)
            if(res.meta.status != 200) return this.$message.error("获取权限列表失败")
            this.rightsList = res.data

        }
    },
    filters: {
        changeLevel(level) {
            if(level == 0) return '一级'
            if(level == 1) return '二级'
            if(level == 2) return '三级'
        }
    }

}
</script>

<style lang="less" scope>
.rights-table {
    text-align: center;
}
</style>